<template>
    <div>
        <!-- 颜色编辑器 -->
        <el-dialog title="颜色编辑" :visible.sync="dialogVisible" :width="dialogWidth" v-if="dialogVisible">
            <div class="menu_content">
                <div class="menu_content_left">
                    <div class="title_menu">数值类别</div>
                    <div class="content_menu">
                        <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleChange">
                            <el-menu-item :index="`${i + 1}`" v-for="(item, i) in list" :key="i">
                                <span slot="title">
                                    <span class="title_color" :style="`backgroundColor:${item.color}`"></span>
                                    <span>{{ item.text }}</span>
                                </span>
                            </el-menu-item>
                        </el-menu>
                    </div>

                </div>
                <div class="menu_content_right">
                    <div class="title_menu">配色方案</div>
                    <div class="customColors">
                        <div class="replace_main">
                            <div class="replace">
                                <span v-for="(item, index) in replaceListDialog" :key="index"
                                    :style="`backgroundColor:${item}`"></span>
                                <b>{{ valueWithin }}</b>
                            </div>
                            <el-select v-model="valueWithin" @change="changeScheme">
                                <el-option v-for="item in selectList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span class="colorSelect">
                                        <span v-for="(i, y) in item.content.filter((item, index) => index < 8)" :key="y"
                                            :style="`backgroundColor:${i}`"></span>
                                        <b>{{ item.label }}</b>
                                    </span>
                                </el-option>
                            </el-select>
                        </div>


                        <div class="custrom">
                            <span class="current" :style="`backgroundColor:${selectColor}`"></span>
                            <span>自定义颜色</span>
                        </div>
                    </div>
                    <div class="color_content" @click="isActive">
                        <div class="detail" v-for="(item, index) in colorList" :key="index" :style="`background:${item}`"
                            :data-id="item">
                            <i class="el-icon-check" v-if="selectColor == item"></i>
                        </div>
                    </div>
                    <el-checkbox v-model="checked" style="float: right;margin-bottom: 10px;"
                        @change="changeAllColor">应用所有</el-checkbox>
                </div>
            </div>
            <div slot="footer" class="dialog-footer btn_fixed">
                <div class="reverse" @click="reverse">颜色反转</div>
                <div class="btn_right">
                    <div class="determine" @click="determine">确定</div>
                    <div class="cancel" @click="cancel">取消</div>
                </div>
            </div>
        </el-dialog>

        <div class="btn_replace top">
            <div class="replace_main">
                <div class="replace" @click="selectOnClick(item.code)">
                    <div>
                        <span v-for="(item, index) in replaceList" :key="index" :style="`backgroundColor:${item}`"></span>
                    </div>
                    <b>{{ initValue }}</b>
                    <i class="el-icon-arrow-down" ref="value"></i>
                </div>
                <el-select v-model="initValue" ref="select" @change="changeSelectColors($event, item.code)">
                    <el-option v-for="item in selectColorList" :key="item.value" :label="item.label" :value="item.value">
                        <span class="colorSelect">
                            <span v-for="(i, y) in item.content.filter((item, index) => index < 8)" :key="y"
                                :style="`backgroundColor:${i}`"></span>
                            <b>{{ item.label }}</b>
                        </span>
                    </el-option>
                </el-select>
                <!-- <el-button icon="el-icon-edit-outline" class="btn" size="small" @click="ColorDialogOpen"
                    style="font-size: 18px;"></el-button> -->
            </div>
        </div>
    </div>
</template>

<script>
import { deepClone } from '@/utils';
export default {
    props: {
        item: {
            type: Object,
            default: () => { }
        },
        value: {
            type: String,
            default: 'Science'
        }
    },
    name: 'GenescloudUiMutipleColor',

    data() {
        return {
            list: [],
            selectList: this.$publicData('colorList'),
            valueWithin: '',
            menuIndex: 0,
            colorGroupList: [],
            selectColor: null,
            checked: false,
            colorList: [],
            replaceListDialog: [],
            dialogVisible: false,
            dialogWidth: '620px',
            replaceList: [],
            initValue: '',
            selectColorList: this.$publicData('colorList'),
            form: {},
            itemConfig: {}
        };
    },
    watch: {
        item: {
            handler(val, newVal) {
                if (val) {
                    this.init(val)
                }
            },
            deep: true,
            immediate: true,
        },
        value: {
            handler(val, newVal) {
                if (val) {
                    this.getList(val)
                }
            },
            immediate: true
        }
    },
    mounted() {

    },

    methods: {
        init(obj) {
            this.itemConfig = deepClone(obj)
            let item = this.selectList.find(i => i.value === obj.default)
            this.replaceList = item.content.filter((i, y) => y < 8)
            this.colorGroupList = deepClone(obj.data)
            this.list = deepClone(obj.data)
        },
        getList(value) {
            this.initValue = value
        },
        //菜单切换
        handleChange(key) {
            this.menuIndex = key - 1
            this.selectColor = this.list[key - 1].color
        },
        //触发下拉事件
        selectOnClick(prop) {
            this.$refs['select'].toggleMenu()
        },
        //改变下拉框颜色
        changeSelectColors(value, prop) {
            console.log(value,'value');
            const newColor = this.selectColorList.find(item => item.value === value) || {}
            this.replaceList = newColor.content.filter((item, index) => index < 8)
            this.initValue = value
            this.list.map((item, index) => {
                item.color = newColor.content[index]
            })
            this.selectColor = newColor.content[0]
            this.$emit('changeList', this.item.code, this.initValue, this.list)
        },
        //打开颜色编辑器
        ColorDialogOpen() {
            this.valueWithin = this.initValue
            if (!this.list.every(i => i.text)) return this.$message.error('请先输入所有code，否则会导致未知错误！')
            this.dialogVisible = true
            // //替换的颜色
            this.replaceListDialog = this.selectList.find(item => item.value === this.initValue).content.filter((item, index) => index < 8)
            this.colorList = this.selectList.find(item => item.value == this.valueWithin).content
            this.selectColor = this.list[0].color
            this.checked = this.list.every(item => item.color == this.selectColor)
        },
        //选中的颜色
        isActive(e) {
            if (e.target.dataset.id) {
                this.selectColor = e.target.dataset.id
                this.checked = false
                this.list[this.menuIndex].color = e.target.dataset.id
            }
        },
        //改变所有的颜色
        changeAllColor(value) {
            if (value) {
                this.list = this.list.map(item => {
                    return {
                        text: item.text,
                        color: this.selectColor
                    }
                })
            } else {
                this.changeScheme(this.valueWithin)
            }
        },
        //颜色反转
        reverse() {
            const color = this.list.map(item => item.color).reverse()
            this.list = this.list.map((item, index) => {
                return {
                    text: item.text,
                    color: color[index]
                }
            })
        },
        //确定
        determine() {
            this.colorGroupList = deepClone(this.list)
            const newColor = this.selectColorList.find(item => item.value === this.valueWithin) || {}
            this.replaceList = newColor.content.filter((item, index) => index < 8)
            this.dialogVisible = false
            this.initValue = this.valueWithin
            this.$emit('changeList', this.item.code, this.initValue, this.list)
        },
        //取消
        cancel() {
            this.list = deepClone(this.colorGroupList)
            this.dialogVisible = false
        },
        //改变下拉框颜色
        changeScheme(value) {
            //替换的颜色
            this.replaceListDialog = this.selectList.find(item => item.value === value).content.filter((item, index) => index < 8)
            const item = this.selectList.find(item => item.value === value) || []
            this.colorList = item.content
            if(this.list.length){
                this.list.map((item, index) => {
                    item.color = this.colorList[index]
                })
            }
            this.checked = false
            this.selectColor = this.colorList[0]
            this.replaceListDialog = item.content.filter((item, index) => index < 8)
        },
    },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.btn_replace.top {
    ::v-deep .el-input__inner {
        height: 35px;
        line-height: 35px;
        border: 0 !important;
    }

    .replace_main {
        position: relative;

        .btn {
            position: absolute;
            top: 0;
            left: 240px;
            height: 35px;
            padding: 0 10px;
        }
    }

    .replace {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ccc;
        padding: 0 15px 0;
        width: 220px;
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        background-color: #fff;
        cursor: pointer;

        span {
            width: 10px;
            height: 10px;
            display: inline-block;
        }
    }
}

.colorSelect {
    span {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin-right: 1px;
    }
}

.menu_content {
    display: flex;
    justify-content: space-between;
    height: 80%;

    ::v-deep .el-input__icon {
        line-height: 30px !important;
    }

    .title_color {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin-right: 5px;
        display: inline-block;
    }

    .menu_content_left {
        width: 200px;

        .title_menu {
            padding: 5px 0 5px;
        }

        ::v-deep .el-menu-item.is-active {
            color: #000;
            background-color: #ccc;
        }

        .content_menu {
            width: 200px;
            height: 100%;
            overflow-y: auto;
            // margin-bottom: 65px;
        }

        ::v-deep .el-menu-item,
        .el-submenu__title {
            height: 45px;
            line-height: 45px;
        }


    }

    .menu_content_right {
        flex: 1;
        padding-left: 25px;
        height: 450px;

        border-left: 1px solid #ccc;

        .title_menu {
            padding: 5px 0 5px;
        }

        .customColors {
            display: flex;
            height: 45px;
            align-items: center;

            .replace_main {
                height: 100%;
            }

            .current {
                margin-left: 15px;
                width: 10px;
                height: 10px;
                background-color: red;
                display: inline-block;
            }
        }

        ::v-deep .el-input--suffix .el-input__inner {
            height: 30px;
            border-radius: 3px;
        }

        ::v-deep .el-input__icon {
            line-height: 30px;
        }

        .color_content {
            width: 320px;
            height: 295px;
            margin-top: 15px;
            overflow-y: auto;
            display: flex;
            flex-wrap: wrap;

            .detail {
                width: 40px;
                height: 40px;
                margin: 0 15px 15px 0;
                border-radius: 50%;
                text-align: center;
                line-height: 40px;

                .el-icon-check {
                    color: #fff;
                    transform: scale(1.5);
                }

                cursor: pointer;
            }


        }
    }
}

//颜色编辑器
::v-deep .el-dialog__body {
    margin: 0 25px 0;
    padding: 0 15px;
    border-top: 1px solid #ccc;

    .el-input--suffix .el-input__inner {
        opacity: 0;
    }

    .el-select {
        transform: translateY(-40px) !important;
    }

    height: 450px;

    .replace {
        align-items: center;
        border: 1px solid #ccc;
        padding: 0 15px 0;
        width: 200px;
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
        z-index: 1;
        background-color: #fff;
        cursor: pointer;

        span {
            width: 10px;
            height: 10px;
            display: inline-block;
        }
    }
}



::v-deep .el-dialog__header {
    padding: 10px 35px;
    background: #fff;

    .el-dialog__title {
        color: #000 !important;
        font-weight: 400;
    }
}

::v-deep .el-dialog__footer {
    border-top: 1px solid #ccc;
    margin: 0 25px;

    .btn_fixed {
        // position: absolute;
        // bottom: 15px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        height: 35px;
        line-height: 35px;
        // padding-top: 15px;
        // border-top: 1px solid #ccc;

        .reverse {
            background-color: #e4f2fc;
            padding: 0 15px;
            border: 0;
            cursor: pointer;
            color: $themeTopToolColor;
        }

        .btn_right {
            display: flex;
            justify-content: space-around;
        }

        .determine {
            cursor: pointer;
            background-color: $themeTopToolColor;
            color: #fff;
            border: 0;
            padding: 0 16px;
            border-radius: 3px;
            margin-right: 15px;
        }

        .cancel {
            cursor: pointer;
            background-color: #fff;
            color: #666;
            border: 1px solid #ccc;
            padding: 0 15px;
            border-radius: 3px;
        }
    }
}
</style>